<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>考勤详情</title>
<jsp:include page="${home}/assets/common_inc_new.jsp"  flush="true"></jsp:include>
<script type="text/javascript" src="${home}/system/common/scripts/zDialog.js"></script>
<script type="text/javascript" src="${home}/system/common/scripts/utils.js"></script>
<link rel="stylesheet" type="text/css" href="../css/index.css">
<link rel="stylesheet" type="text/css" href="../css/add.css">
<link rel="stylesheet" type="text/css" href="../css/details.css">

<style>
	*{
		font-weight: 400;
	}
	.checkModule{
		border-radius: 20px;
		width: 20px;
		height: 20px;
		align-content: center;
	}
			
		dl dt{
			margin-left: 40px;
	}
	.tab-content dl dt{
		color: #000000;
		font-size: 18px;
		font-weight: 400;
		
	}
	label{
		font-size: 18px;
		color:#3296fa;
		font-weight: 400;
		margin-left: 20px;
	}
	.line{
		border-bottom: 1px solid #dddddd;
		margin-bottom: 44px;
		margin-top: 20px;
	}
	.cl:after{
		clear: both;
		height: 0;
		content: '';
		display:block;
	}
	
	.state .title1{
			font-size: 18px;
				font-weight: 400;
				margin:13px 35px 0 100px;
				color: #000;
				float: left;
				width: 80px;
	}
	.state img{
		display: block;
		float: left;
	}
	.mainss{
		float:left;
		width: 500px;
	}
	.mainss .state{
		width: 100%;
		margin-bottom: 30px;
		position: relative;
	}
	.mainss .state img{
			width: 28px;
				height: 28px;
				margin-top: 9px;
				z-index: 5;
				position: relative;
				display: block;
	}
	.mainss .state .content{
		/* background: #f1f9fc; */
		margin-left: 60px;
		width: 400px;
		padding: 14px 20px;
		line-height: 20px;
		font-weight: 400;
		font-size: 16px;
		position: relative;
		margin-bottom: 30px;
	} 
	.mainss .state .content .nametxt{
		color: #000000;
		margin-right: 20px;
	}
	.mainss .state .content .status{
		color: #dddddd;
	}
	.statuss{
		color: #3296FA;
	}
	.mainss .state .content .time{
			position: absolute;
			right: 20px;
			top: 12px;
			width: 165px;
			height: 20px;
			font-size: 16px;
			color: #666666;
			text-align: center;
	}
	.btn{
		width: 125px;
		height: 40px;
		margin: 0px 40px 0 0;
		border: 1px solid #288ff4;
		color: #288ff4;
		font-size: 16px;
		background-color: #fff;
		border-radius: 5px;
	}
	.page-footer .btn-list{
			padding: 10px 218px;
	}
	.line2{
			width: 13px;
				height: 130px;
				position: absolute;
				border-right: 2px solid #dddddd ;
				top: -29px;
				z-index: -1;
				left: 0;
	}
	.remark{
		height: 32px;
		font-size: 16px;
		white-space: pre-wrap;
		overflow: hidden;
		overflow-y: auto;
		line-height: 16px;
		margin-top:15px ;
		color: #666666;
		
	}
</style>

<%
  String application_id =request.getParameter("application_id");
  String sts =request.getParameter("sts");
  String dept_id =request.getParameter("dept_id");
 %>

<script type="text/javascript">
function getYMD(){
  var date = new Date();
  var seperator1 = "-";
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
       month = "0" + month;
   }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
   }
  return date.getFullYear() + seperator1 + month + seperator1 + strDate;
}

function queryGrid() {

}

function batchAdd() {
  $("#batch_add_pane").fadeIn();
}

function cancelModel(id) {
  $("#" + id).fadeOut();
}

function obj2Str(obj) {
  return JSON.stringify(obj).replace(/"/g, "'");
}

function buildClickTd(item, row, schedule) {
  var itemStr = obj2Str(item);
  return "<td align=\"center\" class=\"click-td\" onclick=\"choose(" + itemStr + ", " + row + ", '" + schedule + "');\">"
  + "<img src=\"../assets/v.png\" class=\"v\" id=\"v_" + row + "_" + schedule + "\">"
  + "</td>";
}

function buildInputTd(row, name, value) {
  return "<td align=\"center\">"
  + "<input onchange=\"fill(" + row + ", '" + name + "');\" id=\"i_" + row + "_" + name + "\" class=\"td-input\" type=\"text\" value=\"" + value + "\">"
  + "</td>";
}

function buildTd(value) {
  return "<td align=\"center\">" + value + "</td>";
}

function buildTableDataUI(data){
  for (var i = 0; i < data.length; i++) {
    var item = data[i];
    var html = "<tr>"
    + buildTd(i + 1)
    + buildTd(item.name)
    + buildClickTd(item, i, 'am')
    + buildClickTd(item, i, 'pm')
    + buildClickTd(item, i, 'night')
    + buildClickTd(item, i, 'day')
    + buildInputTd(i, 'workValue', '')
    + buildInputTd(i, 'midnight', '')
    + "</tr>";
    $("#resultgrid").append(html);
  }
}

function choose(user, row, column) {
  if (isNaN(column)) {
    return;
  }
  var v = "#v_" + row + "_" + column;
  $(v).toggle();
}

var diag;
var approvalBtnId
function queryApproval(id) {
    approvalBtnId = id;
    diag = new Dialog();
    diag.Width = 800;
    diag.Height = 500;
    diag.Title = "";
    diag.URL = "approval.jsp";
    diag.ShowMessageRow = false;
    diag.show();
}

function addApproval(approval) {
  var approvalHtml = "<div class=\"approval-person\">" + approval.name + "</div>";
  $("#" + approvalBtnId).before(approvalHtml);
}

function buildRecordsMap(data) {
  var map = {};
  for (var i = 0; i < data.attendRecordList.length; i++) {
    var record = data.attendRecordList[i];
    if (!map[record.staff_id]) {
      map[record.staff_id] = [];
    }
    map[record.staff_id].push(record);
  }
  return map;
}

var typeScheduleMap ={
  "1": 'am',
  "2": 'pm',
  "4": 'night',
  "8": 'day'
};
function initData(data) {
  var recordsMap = buildRecordsMap(data);
  for (var i = 0; i < attendData.length; i++) {
    var attend = attendData[i];
    var records = recordsMap[attend.id];
    if (records) {
      for (var j = 0; j < records.length; j++) {
        var record = records[j];
        if (record.scheduleCheckType) {
          var scheduleArr = record.scheduleCheckType.split(',');
          if (scheduleArr && scheduleArr.length) {
            for (var k = 0; k < scheduleArr.length; k++) {
              var type = scheduleArr[k];
              var schedule = typeScheduleMap[type];
              var v = "#v_" + i + "_" + schedule;
              record[schedule] = type;
              $(v).show();
            }
          }
        }
		var workKey = "#i_" + i + "_workValue";
		$(workKey).val(record.work_value);
		var midKey = "#i_" + i + "_midnight";
		$(midKey).val(record.man_hour_midnight);
      }
    }
  }
}

function back() {
  window.location.href = "index.jsp";
}

function doReturn(){
   window.history.go(-1);
}

function update() {
  window.location.href = "add.jsp?application_id=" + application_id + "&dept_id=" + workAttendDetail.attendApplication.dept_id;
}

function revoke() {
  var head={
    "service_name":"cn.dy.workatten.service.WorkAttenService",
    "operation_name":"revokeAudit"
  };
  var param={
    "attend_application_id": application_id
  };
  var options = {
    "handleError": false,
    "showProgressBar":false,
    "timeout":60000*10
  };
  var cb = function(data, result) {
    $.dialog.tips(result.response_code == '0' ? "撤销审批成功" : "撤销审批失败");
    setTimeout(back, 1000);
  }
  $.ServiceAgent.JSONInvoke(head, param, cb, options);
}

var workAttendDetail = {};
function getWorkAttendDetail() {
  var head={
    "service_name":"cn.dy.workatten.service.WorkAttenService",
    "operation_name":"getWorkAttendDetail"
  };
  var param={
    "attend_application_id": application_id
  };
  var options = {
    "handleError": false,
    "showProgressBar":false,
    "timeout":60000*10
  };
  var cb = function(data, result) {
    if(result.response_code == '0'){
      $.dialog.tips("查询成功...");
      console.log('==================');
      console.log(data);
      workAttendDetail = data.content;
	  var attendApplication = data.content.attendApplication;
	  $("#deptName").text(attendApplication.deptName);
	  $("#current_date").text(attendApplication.attendanceDayStr);
	  $("#approver00").html(attendApplication.staffName);
      $("#time00").html(attendApplication.create_time);
	
	 // 显示审批流程
	 var auditingDetailList = data.content.auditingDetailList;
	 for(var $i = 0; $i < auditingDetailList.length;$i++){
		var $approver='approver'+$i;
		var $status='status'+$i;
		var $time='time'+$i;
	   var $str='<div class="state cl">'+'<div class="line2"></div><img class="img" id=img'+$i+' src="/xyzg/leaveapplication/img/wait.png">'+'<div class="content cl"><span class="nametxt" id=approver'+$i+'></span><span class="status" id=status'+$i+'></span><div class="time" id=time'+$i+'></div><div class="remark" id=remark'+$i +'></div></div></div>';
		$('#mainss').append($str);
		
		if(auditingDetailList[$i].audit_sts == 1){
			$('.img').attr('src','/xyzg/leaveapplication/img/through.png');
			$('.status').css('color','#3296FA');
			$('.content').css('background','#f1f9fc');
			$('.line2').css('border-right-color','#3296fa');
			$('#remark'+$i).html(auditingDetailList[$i].audit_remark);
			$('#time'+$i).html(auditingDetailList[$i].create_time);
		}
		$('#status'+$i).html(auditingDetailList[$i].audit_stsTxt);
		$('#name'+$i).html(auditingDetailList[$i].create_time);
        $('#approver'+$i).html(auditingDetailList[$i].auditName);
	 }


      initData(data.content);
      $("#applicant").text(data.content.attendApplication.staffName);
    }
  }
  $.ServiceAgent.JSONInvoke(head, param, cb, options);
}

var attendData = [];
function queryUsers() {
  var head={
    "service_name":"cn.dy.workatten.service.WorkAttenService",
    "operation_name":"getContactInfoByDept"
  };
  var param={
    "dept_id": dept_id,
    "query": "",
    "pageNum": 0,
    "pageSize": 0
  };
  var options = {
    "handleError": false,
    "showProgressBar":false,
    "timeout":60000*10
  };
  var cb = function(data, result) {
    if(data != null){
      $.dialog.tips("查询成功...");
      console.log('--------data-----------');
      console.log(data);
      attendData = data.content.result;
      buildTableDataUI(data.content.result);
      getWorkAttendDetail();
    }
  }
  $.ServiceAgent.JSONInvoke(head, param, cb, options);
}

function auditAtten(audit_sts){
	  // 审核通过
	  var head={
		"service_name":"cn.dy.workatten.service.WorkAttenService",
		"operation_name":"auditWorkAttend"
	  };
	  var param={
		"attend_application_id": application_id,
		"audit_sts": audit_sts,
		"audit_remark": ""
	  };
	  var options = {
		"handleError": false,
		"showProgressBar":false,
		"timeout":60000*10
	  };
	  var cb = function(data, result) {
		if(data.response_code==0){
			alert(data.response_desc);
			back();
		}else{
			alert(data.response_desc);
		}	
	  }
	  $.ServiceAgent.JSONInvoke(head, param, cb, options);
}



function initUI() {
  // var html;
  // if (sts == '0') {
  //  html = "<button class=\"action\" type=\"button\" id=\"cancel\" onclick=\"update()\">修改</button>";
  // } else {
  //  html = "<button class=\"action\" type=\"button\" id=\"cancel\" onclick=\"revoke()\">撤回</button>";
  // }
  // $("#actions").append(html);
}

var application_id;
var sts;
var dept_id;
$(function() {
  application_id = "<%=application_id%>";
  sts = "<%=sts%>";
  dept_id = "<%=dept_id%>";
  //$("#deptName").text(dept_id);
  queryUsers();
  initUI();
});
</script>

</head>
<body class="mainbody">
	<!--导航栏-->
    <div class="location">
        <a onclick="back();" class="back"><i></i><span>返回管理页面</span></a>
        <i class="arrow"></i>
        <span id="lbTitle">考勤详情</span>
    </div>


	<div class="toolbar-wrap">
		<div class="details-top">
      民警考勤表
    </div>
    <div class="workatten-top" style="border-top: none">
      部门: <span id="deptName"></span>
      <span class="current-date">
        考勤日期: <span class="current-date" id="current_date"></span>
      </span>
    </div>
    <table width="100%" border="0" cellpadding="0" cellpadding="0" class="ltable" id="resultgrid">
			<tr>
				<th width="10%" rowspan="2">序号</th>
				<th width="10%" rowspan="2" class="name-date">
          <span class="name">姓名</span>
          <span class="datetxt">日期</span>
        </th>
        <th width="13%" colspan="6">1日</th>
			</tr>
      <tr>
				<th width="13%">上午</th>
				<th width="13%">下午</th>
				<th width="13%">夜班</th>
				<th width="13%">早中晚班</th>
				<th width="13%">额外分值(分)</th>
				<th width="13%">0点后(时)</th>
			</tr>
		</table>
    <!--<div class="approval">
      <div class="approval-level clearfix">
        <div class="approval-title">
          审批状态:
        </div>
        <div class="approval-person" id="applicant"></div>
        <div class="approval-uncommitted">
          未提交
        </div>
      </div>
    </div>-->
	<div class="state cl">
		<div class="title1">审批状态:</div>
		<div class="mainss cl" id='mainss'>
			<div class="state cl">
				<div class="line2" style="border-right-color: rgb(50, 150, 250);top: 0px;height: 60px;"></div>
				<img class="img" id="img0" src="/xyzg/leaveapplication/img/through.png">
				<div class="content cl" style="background: rgb(241, 249, 252);">
					<span class="nametxt" id="approver00"></span>
				<span class="status" id="status00" style="color: rgb(50, 150, 250);">发起申请</span>
				<div class="time" id="time00"></div></div>
			</div>
		</div>
	</div>

    <div class="actions" id="actions">
      <button class="btn" type="button" id="btnBack" onclick="back()">返回</button>
	  <button class="btn" type="button" id="btnAudit" onclick="auditAtten(1)">审批通过</button>
	  <button class="btn" type="button" id="cancel" onclick="auditAtten(2)">审批不通过</button>
    </div>
	</div>
</body>
</html>
